<template>
	<view class="video-detail">
		<video class="video" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"></video>
		<view class="card-box">
			<view class="title">视频标题</view>
		</view>
		<view class="button-box">
			<button class="btn download" @click="downloadVideo">下载视频</button>
			<button class="btn share" @click="shareShow = true">分享</button>
		</view>
		
		<view class="progress-mask" v-if="showMask">
			<view class="progress-box">
				<view class="percentage">{{ percentage }}%</view>
				<view class="progress">
					<u-line-progress :percentage="percentage" activeColor="#348afc" :showText="false"></u-line-progress>
				</view>
				<view class="tips">视频下载中</view>
			</view>
		</view>
		
		<u-popup v-model="shareShow" mode="bottom" borderRadius="20" >
			<view class="share-popup">
				<scroll-view scroll-x class="scroll">
					<view class="box">
						<view class="item" @click="shareWeiXin">
							<image class="icon" src="@/static/icons/weixin.png" mode="aspectFill"></image>
							<view class="text">分享微信好友</view>
						</view>
						<view class="item" @click="sharePengyouquan">
							<image class="icon" src="@/static/icons/pengyouqun.png" mode="aspectFill"></image>
							<view class="text">分享朋友圈</view>
						</view>
						<view class="item" @click="shareDouyin">
							<image class="icon" src="@/static/icons/douyin.png" mode="aspectFill"></image>
							<view class="text">发布到抖音</view>
						</view>
					</view>
				</scroll-view>
				<view class="cancel" hover-class="btn-hover" :hover-stay-time="100" @click="shareShow = false">取消</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// import MD5 from 'crypto-js/md5'
	// import { generateRandomString, getNowSecond } from '@/common/utils/index.js'
	
	export default {
		data () {
			return {
				showMask: false,
				percentage: 0,
				
				shareShow: false
			}
		},
		methods: {
			downloadVideo () {
				let url = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4'
				
				this.percentage = 0
				this.showMask = true
				
				const downloadTask = uni.downloadFile({
					url: url,
					success: (res) => {
						this.showMask = false
				
						if (res.statusCode === 200) {
							uni.saveVideoToPhotosAlbum({
								filePath: res.tempFilePath,
								success: (res) => {
									uni.showToast({
										title: '保存成功',
									})
								},
								fail: (err) => {
									uni.showToast({
										title: '保存失败',
										icon: 'error'
									})
								}
							})
						} else {
							this.downloadFail()
						}
					},
					fail: (err) => {
						this.showMask = false
						
						this.downloadFail()
					}
				})
				
				downloadTask.onProgressUpdate((progressReq) => {
					this.percentage = progressReq.progress
				})
			},
			downloadFail () {
				uni.showModal({
					title: '下载失败',
					success: (res) => {}
				})
			},
			
			shareDouyin () {
				this.$u.api.get_tik_api().then(res => {
					// let ticket = res.data.tick_value
					// let text = `nonce_str=${nonce_str}&ticket=${ticket}&timestamp=${timestamp}`
					// let signature = MD5(text).toString()

					let nonce_str = res.data.nonce_str
					let timestamp = res.data.timestamp.toString()
					let signature = res.data.signature
					let client_key = res.data.client_key
					
					let video_path = encodeURI('https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4')
					let title = encodeURI('视频标题')
					let schemes = `snssdk1128://openplatform/share?share_type=h5&client_key=${client_key}&nonce_str=${nonce_str}&timestamp=${timestamp}&signature=${signature}&video_path=${video_path}&title=${title}&share_to_publish=1`
					
					this.jumpDouyin(schemes)
				})
			},
			jumpDouyin (schemes) {
				console.log(schemes)
				if (plus.os.name == 'Android') {
					if (plus.runtime.isApplicationExist({ pname: 'com.ss.android.ugc.aweme' })) {
						plus.runtime.openURL(schemes)
					} else {
						uni.showToast({
							title: '请安卓抖音程序',
							icon: 'none'
						})
					}
				}
			},
			shareWeiXin () {
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 4,
					title: '视频标题',
					mediaUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4',
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				})
			},
			sharePengyouquan () {
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneTimeline',
					type: 4,
					title: '视频标题',
					mediaUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4',
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.video-detail {
	height: calc(100vh - var(--window-top));
	background-color: #000;
	display: flex;
	flex-direction: column;
	.video {
		width: 100%;
		height: 33.33%;
	}
	.card-box {
		flex: 1;
		padding: 28rpx;
		border-radius: 20rpx 20rpx 0 0;
		background-color: #fff;
		.title {
			color: #333;
			font-size: 28rpx;
		}
	}
	.button-box {
		height: 120rpx;
		padding-left: 28rpx;
		padding-right: 28rpx;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #fff;
		display: flex;
		align-items: center;
		gap: 28rpx;
		.btn {
			flex: 1;
			margin: 0;
			padding: 0;
			border-radius: 76rpx;
			width: 192rpx;
			height: 76rpx;
			color: #fff;
			font-size: 28rpx;
			line-height: 76rpx;
			border: none;
			&::after {
				border: none;
			}
			&.download {
				background-color: #348afc;
			}
			&.share {
				background-color: #fca72f;
			}
		}
	}
	
	.progress-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		background-color: rgba($color: #000, $alpha: 0.3);
		.progress-box {
			position: absolute;
			top: 50%;
			left: 32rpx;
			right: 32rpx;
			z-index: 100;
			transform: translateY(-50%);
			padding: 40rpx;
			border-radius: 28rpx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.percentage {
				color: #348afc;
				font-size: 50rpx;
				font-weight: bold;
			}
			.progress {
				width: 100%;
				margin-top: 16rpx;
			}
			.tips {
				margin-top: 16rpx;
				color: #666;
				font-size: 28rpx;
			}
		}
	}
	.share-popup {
		background-color: #eee;
		.scroll {
			width: 100%;
			background-color: #fff;
			.box {
				white-space: nowrap;
				.item {
					padding: 32rpx 20rpx;
					display: inline-block;
					text-align: center;
					.icon {
						width: 80rpx;
						height: 80rpx;
					}
					.text {
						margin-top: 8rpx;
						color: #333;
						font-size: 28rpx;
					}
				}
			}
		}
		.cancel {
			margin-top: 10rpx;
			height: 88rpx;
			color: #333;
			font-size: 28rpx;
			text-align: center;
			line-height: 88rpx;
			background-color: #fff;
		}
	}
	
	.btn-hover {
		background: #f5f5f5 !important;
	}
}
</style>
